<template>
	<view class="page" v-if="detail">
		<view class="head-pic">
			<!-- <image :src="'https://www.worldintek.com:39011/yaolexue-service/'+detail.imageCoverDto.compressLink"></image> -->
			<video object-fit='fill'
				:src="'https://www.worldintek.com:39011/yaolexue-service/' + detail.videoPlayDto.originalLink" controls
				:poster="'https://www.worldintek.com:39011/yaolexue-service/' + detail.imageCoverDto.compressLink"></video>
		</view>
		<view class="padd-top26 padd-bottom39 padd-left31 padd-right31">
			<view class="flex justify-between mar-bottom25">
				<view class="cr-333 font-s32">{{ detail.title }}</view>

				<view class="right" @click="handleClickCollection">
					<image v-if='detail.collectionStatus === 0'
						:src="'https://www.worldintek.com:39011/yaolexue-service/' + 'icon_start.png'"></image>
					<image v-if='detail.collectionStatus === 1'
						:src="'https://www.worldintek.com:39011/yaolexue-service/' + 'icon_start_active.png'"></image>
				</view>
			</view>
			<view class="cr-999 font-s26 mar-bottom39">{{ detail.createTime }}</view>
			<view class="flex justify-between mar-top41 mar-bottom30">
				<view class="ll-box flex align-center">
					<view class="font_s28 cr-333">
						播放
						<text class="mar-left35">{{ detail.clickNumber }}</text>
					</view>
				</view>
				<view class="ll-box flex justify-between align-center">
					<view class="font_s28 cr-333">
						点赞
						<text class="mar-left35">{{ detail.likeNumber }}</text>
					</view>
					<view @click="handleClickLike">
						<image v-if="detail.likeStatus === 0"
							:src="'https://www.worldintek.com:39011/yaolexue-service/' + 'icon_zan.png'" class="w-26 h-26">
						</image>
						<image v-if="detail.likeStatus === 1"
							:src="'https://www.worldintek.com:39011/yaolexue-service/' + 'icon_zan_active.png'"
							class="w-26 h-26"></image>
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view class="flex justify-between mar-top43">
				<view class="l-con cr-333 font_s28 line-height100">
					<view class="l-text width_1">往期节目</view>
				</view>
				<view class="r-con align-center font_s24 flex align-center" @click="handleShowHisPopup(true)">
					<view class="r-text width_1">共{{ detail.contentItemVideoDtos.length }}期</view>
					<image :src="'https://www.worldintek.com:39011/yaolexue-service/' + 'icon_right.png'"
						class="w-10 h-20 mar-left8"></image>
				</view>
			</view>
			<view class="history flex">
				<view class="history-item mar-top23" v-for="(item ) in detail.contentItemVideoDtos"
					@click="handleDetail(item)">
					<view class="his-pic mar-bottom12">
						<image class="poster"
							:src="'https://www.worldintek.com:39011/yaolexue-service/' + item.imageDto.compressLink"></image>
						<image class="play-icon" src="https://www.worldintek.com:39011/yaolexue-service/icon_playCircle.png"
							mode=""></image>
					</view>
					<view class="font_s26 cr-333 text_over_ell text_center ">{{ item.title }}</view>
				</view>

			</view>
		</view>
		<u-line color="#E1E1E1" class="h-4"></u-line>

		<view class="padd-top30 padd-bottom39 padd-left32 padd-right58">
			<view class="title cr-333 mar-bottom27">简介</view>
			<view class="content cr-333 font_s24">{{ detail.contentText }}</view>
		</view>
		<u-popup :show="showHisPopup" mode="bottom" @close="handleShowHisPopup(false)" closeable>
			<view class="his-pop padd-top30 padd-left32 padd-right32">
				<view class="font_s28 cr-333 mar-bottom31">选期</view>
				<view class="content">
					<view class="flex mar-bottom19 " v-for="item in detail.contentItemVideoDtos"
						@click="handleDetail(item)">
						<view class="pic mar-right15">
							<image class="poster"
								:src="'https://www.worldintek.com:39011/yaolexue-service/' + item.imageDto.compressLink">
							</image>
							<image class="play-icon"
								src="https://www.worldintek.com:39011/yaolexue-service/icon_playCircle.png" mode=""></image>
						</view>
						<view class="padd-top25 padd-bottom9 flex_column justify-between ">
							<view class="name font_s26 cr-333">{{ item.title }}</view>
							<view class="num font_s24 cr-333">{{ item.id }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>


		<!-- 	<u-popup
	class="favorites-popup"
	  :show="showFavoritesPopup"
	  mode="bottom"
	  @close="handleUpdateContentCollectionStatus"
	  
	>
	  <view class="favorites-pop padd-top30 padd-left32 padd-right32">
	    <view class="flex justify-between mar-bottom31">
			<view class="font_s28 cr-333 font_w500 ">
				选择收藏夹
			</view>
			<view class="font_s24 cr-999" @click="handleShowCollctPopup(true)">
				<image src="/static/img/icon_add.png" mode="" class="w-21 h-21 mar-right10"></image>
				新建收藏夹
			</view>
		</view>
	    <view class="content ">
	      <view class=" mar-bottom19 item" v-for="item in favoritesList">
			 <radio-group  @change="radioChange">
						<label class="flex justify-between"  >
							
							<view>
								<view class="cr-333 font_s26 mar-bottom17">
									{{item.favoritesName}}
								</view>
								<view class="cr-999 font_s24">
									10个内容
								</view>
							</view>
							<view>
								<radio  :value="item.id" :checked="activeFavorites.id==item.id" />
							</view>
						</label>
					
			</radio-group>
	      </view>
	    </view>
	  </view>
	</u-popup> -->
		<t-favoritespop :show='showFavoritesPopup' :faChild='detail'
			@close='(defaultFavorites) => { handleShowFaPopup(false); defaultFavorites && (this.detail.collectionStatus = 1 - this.detail.collectionStatus) }'></t-favoritespop>
		<!-- 	<u-popup
	      :show="showCeateCollectPopup"
	      mode="center"
	      @close="handleShowCollctPopup(false)"
	      closeable
	    >
	      <view class="createcollect-pop padd-top30 padd-left32 padd-right32">
	        <view class="font_s28 cr-333 mar-bottom31">创建收藏夹</view>
	        <view class="content padd-bottom30">
	          <view class="flex mar-bottom19 ">
								<u-input type="text" v-model="favoritesName" placeholder="请输入收藏夹名称"></u-input>
	          </view>
						<u-button type="primary" text="确定" @click="handleAddUserFavorites"></u-button>
	        </view>
	      </view>
	    </u-popup> -->
	</view>
</template>
<script>
export default {
	data() {
		return {
			showHisPopup: false,
			showFavoritesPopup: false,
			// showCeateCollectPopup: false,
			detail: null,
			id: '',
			// favoritesList:[],
			// activeFavorites:null,
			// favoritesName:''
		};
	},
	onLoad(payload) {
		if (payload.id) {
			this.id = payload.id
			this.init()
		}
	},
	onShareAppMessage(res) {
		this.$postShareHttp(this.id)
		return {
			title: this.detail.title,
			path: `/pages/VideoItemDetail/VideoItemDetail?id=${this.id}`
		}
	},
	methods: {
		init() {
			this.getDetail()
		},
		async getDetail() {
			return this.$http.get(
				`/yaolexue-service-portal/contentItem/contentVidePlayInfo/` + this.id, {}, {
				isNeedLoading: true
			}).then(res => {
				console.log(res)
				this.detail = res.data
			})
		},
		//获取收藏夹
		// getUserFavorites(){
		// 	return this.$http.get(
		// 		`/yaolexue-service-portal/userFavorites/findUserFavorites`, {}, {
		// 			isNeedLoading: true
		// 		}).then(res=>{
		// 			this.favoritesList=res.data
		// 			this.activeFavorites=res.data.find(item=>item.defaultStatus)||res.data[0]//后台还需要增加字段默认收藏夹选中和改变收藏夹选择

		// 		})

		// },
		//点击收藏
		handleClickCollection() {

			if (this.detail.collectionStatus === 0) {
				this.handleShowFaPopup(true)
			} else {
				this.handleUpdateContentCollectionStatus()
			}
		},
		//添加收藏夹
		//  handleAddUserFavorites(){
		//  	return this.$http.post(
		//  		`/yaolexue-service-portal/userFavorites/addUserFavorites`, {
		//  			favoritesName:this.favoritesName,
		//  		}, {
		//  			isNeedLoading: true
		//  		}).then(res=>{
		//  			if(res.code===200){
		// 			this.handleShowCollctPopup(false)
		//  				 this.getUserFavorites()
		//  			}
		//  		})
		//  },

		//改变收藏状态
		handleUpdateContentCollectionStatus() {
			this.handleShowFaPopup(false)
			// this.handleShowCollctPopup(false)
			const collectionParams = {
				collectionStatus: 1 - this.detail.collectionStatus,
				contentItemId: this.detail.id,
			}
			if (this.activeFavorites) {
				collectionParams.userFavoritesId = this.activeFavorites.id
			}
			return this.$http.put(
				`/yaolexue-service-portal/contentItem/updateContentCollectionStatus`, collectionParams, {
				isNeedLoading: true
			}).then(res => {

				this.detail.collectionStatus = 1 - this.detail.collectionStatus

				if (res.code === 200) {
					// this.getDetail()
				}
			})
		},
		//打开历史弹窗
		handleShowHisPopup(flag) {
			this.showHisPopup = flag;
		},
		//打开收藏夹弹窗
		handleShowFaPopup(flag) {
			// if(flag)this.getUserFavorites()
			this.showFavoritesPopup = flag;
		},
		//打开创建收藏夹弹窗
		// handleShowCollctPopup(flag){
		// 	this.showCeateCollectPopup = flag;
		// },
		//选择收藏夹
		// radioChange(evt){

		// 	this.activeFavorites=this.favoritesList.find(item=>item.id===evt.detail.value)

		// },
		//点击点赞
		handleClickLike() {
			return this.$http.put(
				`/yaolexue-service-portal/contentItem/updateContentLikeStatus`, {
				contentItemId: this.detail.id,
				likeStatus: 1 - this.detail.likeStatus
			}, {
				isNeedLoading: true
			}).then(res => {
				this.detail.likeStatus = 1 - this.detail.likeStatus
				if (this.detail.likeStatus == 0) {
					this.detail.likeNumber -= 1
				} else {
					this.detail.likeNumber += 1
				}
				if (res.code === 200) {
					// this.getDetail()
				}
			})
		},
		handleDetail(e) {
			if (this.detail.id !== e.id) {
				uni.navigateTo({
					url: '/pages/VideoItemDetail/VideoItemDetail?id=' + e.id
				})
			}

		}
	},
};
</script>
<style lang="scss">
.title {
	position: relative;
	font-size: 28rpx;
	padding-left: 14rpx;
	color: #333;

	&::after {
		position: absolute;
		width: 8rpx;
		height: 100%;
		top: 50%;
		transform: translateY(-50%);
		content: "";
		left: 0;
		/* border-radius: 10px; */
		background-color: #fa312a;
	}
}

.page {
	background-color: #fff;

	.head-pic {
		width: 100%;
		height: 420rpx;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.right {
		width: 28rpx;
		height: 28rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ll-box {
		width: 327rpx;
		height: 52rpx;
		background: #d7d7d7;
		padding: 0 20rpx;
	}

	.history {
		.history-item {
			&:not(:nth-child(3n)) {
				/* margin-right: 14rpx; */
				margin-right: calc((100% - 660rpx) / 2);
				width: 220rpx;
			}

			.his-pic {
				height: 123rpx;
				position: relative;

				.poster {
					width: 100%;
					height: 100%;
				}

				.play-icon {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.title {}
		}
	}

	.createcollect-pop {
		width: 400rpx;


	}

	.his-pop {

		// height: calc(100vh - 420rpx);
		.pic {
			width: 220rpx;
			height: 123rpx;
			position: relative;

			.poster {
				width: 100%;
				height: 100%;
			}

			.play-icon {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.num {
			color: #7F7F7F;
		}
	}
}</style>
